<!-- using a hyperscript hack to make the modal pop correctly when it's loaded -->
<dialog class="modal" _="on load call me.showModal()">
    <div class="modal-box w-full">
        <h2 class="font-bold text-xl">
            New Item
        </h2>
        <div id="modal-alert-container"></div>
        <form
            hx-post="/api/v1/depot/new?commander_id={{.CommanderId}}"
            hx-include="input"
            hx-trigger="submit"
            hx-swap="outerHTML"
            hx-target="#depot-content"
            hx-target-error="#modal-alert-container"
            _="on htmx:afterOnLoad if detail.pathInfo.requestPath contains '/depot/new?commander_id=' then call (closest <dialog/>).close()"
        >
            <label class="form-control w-full">
                <div class="label">
                    <span class="label-text">Item ID</span>
                </div>
                <select
                    class="select select-primary w-full"
                    name="template_id"
                    _="on change
                        if me.value is 44001 then
                            remove .hidden from #data-field
                            add .hidden to #count-field
                        else
                            add .hidden to #data-field
                            remove .hidden from #count-field
                        end"
                >
                    {{range .AvailableTemplates}}
                        <option value="{{.ID}}">
                        {{.Name}} — [{{.ID}}]
                        </option>
                    {{end}}
                </select>
            </label>
            <label class="form-control w-full" id="count-field">
                <div class="label">
                    <span class="label-text">Count</span>
                </div>
                <input type="number" name="count" value="1" class="input input-primary input-bordered" min="1" max="4294967295" required>
            </label>
            <label class="form-control w-full hidden" id="data-field">
                <div class="label">
                    <span class="label-text">Data</span>
                </div>
                <input type="number" name="data" value="1" class="input input-secondary input-bordered" min="1" max="4294967295" required>
            </label>
            <div class="join flex justify-center mt-2">
                <button class="btn btn-success join-item" type="submit" name="action" value="new">
                    <i class="bi-plus"></i>
                    Create
                </button>
            </div>
        </form>
    </div>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>